<!-- 余额明细页面 -->
<template>
  <view class="content" :style="mix_diyStyle">
    <view class="navbar">
      <view
        v-for="(item, index) in navList"
        :key="index"
        class="nav-item"
        :class="{ current: tabCurrentIndex == index }"
        @click="tabClick(index)"
      >
        {{ item.text }}
      </view>
    </view>

    <swiper
      :current="tabCurrentIndex"
      class="swiper-box"
      duration="300"
      @change="changeTab"
      :disable-touch="disTouch"
    >
      <swiper-item
        class="tab-content"
        v-for="(tabItem, tabIndex) in navList"
        :key="tabIndex"
      >
        <scroll-view
          class="list-scroll-content"
          scroll-y
          @scrolltolower="loadDatas"
        >
          <view
            v-if="
              tabItem.loadingState != 'first_loading' &&
              tabItem.list.length == 0
            "
            class="empty_part flex_column_start_center"
          >
            <image :src="imgUrl + 'empty_goods.png'" />
            <text>{{ $L('还没有数据哦') }}～</text>
          </view>
		  <view v-if="tabItem.state==0" class="study-list">
			 <view class="hot_list">
			 	<view class="hot_item flex_row_start_start" v-for="(item,index) in tabItem.list" :key="index"  @click="tocourseinfo(item)" >
			 		<view class="hot_left">
			 			<image class="hot_left_image"   :src="item.courseImage" mode="aspectFill"></image>
			 		</view>
			 		<view class="hot_right">
			 			<view class="r_top_classname">{{item.courseName}}</view>
			 			<view class="r_lite_classname">{{item.courseIntro}}</view>
			 			<view class="r_bottom flex_row_between_center">
			 				<view class="r_b_left">{{item.chargeOrNot==0 ? '免费':'收费'}}</view>
			 				<view class="r_b_right flex_row_start_center">
			 					<view>{{item.coursePeople}}</view>
			 					<view>人已学习</view>
			 				</view>
			 			</view>
			 		</view>
			 	</view>
			 </view>
		  </view>
		 <view v-if="tabItem.state==1" class="study-list">
			<view class="expert_list">
				<view class="expert_list_item flex_row_start_center" @click="natTo(item)" v-for="(item,index) in tabItem.list" :key="index" >
					<image class="expert_list_item_image" :src="item.expertImage" mode="aspectFit"></image>
					<view class="expert_list_item_right">
						<view class="expert_list_item_right_top">{{item.expertName}}</view>
						<view class="expert_list_item_right_bottom">
							<view>代表课程</view>
							<view>{{item.courseRepresentative}}</view>
						</view>
					</view>
				</view>
			</view>
		 </view>
        
          <loadingState
            v-if="
              tabItem.loadingState == 'first_loading' ||
              tabItem.list.length > 0
            "
            :state="tabItem.loadingState"
          />
        </scroll-view>
      </swiper-item>
    </swiper>
	<view class="" style="height: 200rpx;"></view>
	<tabBar selectedIndex = 1  ></tabBar>
  </view>
</template>

<script>
import loadingState from "@/components/loading-state.vue";
import {
	mapState
} from 'vuex';
export default {
	components: {
		loadingState
	},
	data() {
		return {
			imgUrl: getApp().globalData.imgUrl,
			tabCurrentIndex: 0,
			navList: [{
					state: 0,
					text: this.$L('全部课程'),
					loadingState: 'first_loading',
					list: [],
					current: 1, //分页
				},
				{
					state: 1,
					text: this.$L('专家团'),
					loadingState: 'first_loading',
					list: [],
					current: 1, //分页
				},
			],
			stopPullDownRefresh: false, //是否下拉刷新中
			// #ifdef H5
			disTouch:true
			// #endif
			// #ifndef H5
			disTouch:false
			// #endif
		};
	},

	onLoad(options) {
        console.log('this.$Route.query',this.$Route.query);
		 if(this.$Route.query.type){
			 this.tabCurrentIndex=this.$Route.query.type
		 }
		if(this.tabCurrentIndex==0){
			this.loadData2()
		}else 	if(this.tabCurrentIndex==1){
			this.loadData()
		}
		// console.log('this.tabCurrentIndex',this.tabCurrentIndex);
		/**
		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
		 * 替换onLoad下代码即可
		 */

	},
	computed: {
		...mapState(['userInfo'])
	},
	//下拉刷新
	onPullDownRefresh() {
		let index = this.tabCurrentIndex;
		let navItem = this.navList[index];
		navItem.loadingState = 'first_loading';
		navItem.list = [];
		navItem.current = 1;
		this.stopPullDownRefresh = true; //下拉刷新状态
		this.loadData();
	},
	methods: {
		loadDatas(){
			if(this.tabCurrentIndex==0){
				this.loadData2()
			}else 	if(this.tabCurrentIndex==1){
				this.loadData()
			}
		},
		natTo(item){
			this.$Router.push({
				path: '/extra/courseinfo/lecturerInfo',
				query: {
					expertId: item.expertId
				}
			})
		},
		//获取订单列表
		loadData(source) {
			//将订单挂载到tab列表下,起到缓存的效果，避免多次请求
			let index = this.tabCurrentIndex;
			let navItem = this.navList.filter(item => item.state == index)[0];
			let state = navItem.state;

			if (source === 'tabChange' && navItem.loadingState !== 'first_loading') {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingState === 'loading') {
				//防止重复加载
				return;
			}

			if (navItem.loadingState == 'no_more_data') {
				//已经没有数据，无需再请求
				return;
			}


               let param = {};
               param.url = 'v3/study/front/expert/team/page';
               param.data = {};
               param.data.pageSize = 10;
               param.data.current = navItem.current;
			  
				navItem.loadingState = navItem.loadingState == 'first_loading' ? navItem.loadingState : 'loading';
			   this.$request(param).then(res => {
				if (res.state == 200) {
					navItem.list = navItem.list.concat(res.data.list);
					let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
					if (hasMore) {
						navItem.current++;
						navItem.loadingState = 'allow_loading_more';
					} else {
						navItem.loadingState = 'no_more_data';
					}
				} else {
					this.$api.msg(res.msg);
				}
				if (this.stopPullDownRefresh) {
					this.stopPullDownRefresh = false;
					uni.stopPullDownRefresh();
				}
			}).catch((e) => {
				//异常处理
			})
		},
		loadData2(source) {
			//将订单挂载到tab列表下,起到缓存的效果，避免多次请求
			let index = this.tabCurrentIndex;
			let navItem = this.navList.filter(item => item.state == index)[0];
			let state = navItem.state;
		
			if (source === 'tabChange' && navItem.loadingState !== 'first_loading') {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingState === 'loading') {
				//防止重复加载
				return;
			}
		
			if (navItem.loadingState == 'no_more_data') {
				//已经没有数据，无需再请求
				return;
			}
		
		
		        let param = {};
				param.url = 'v3/study/front/course/page';
				param.method = 'GET';
				param.data = {}
				param.data.pageSize = 10;
			    param.data.current = navItem.current;
				navItem.loadingState = navItem.loadingState == 'first_loading' ? navItem.loadingState : 'loading';
			   this.$request(param).then(res => {
				if (res.state == 200) {
					navItem.list = navItem.list.concat(res.data.list);
					let hasMore = this.$checkPaginationHasMore(res.data.pagination); //是否还有数据
					if (hasMore) {
						navItem.current++;
						navItem.loadingState = 'allow_loading_more';
					} else {
						navItem.loadingState = 'no_more_data';
					}
				} else {
					this.$api.msg(res.msg);
				}
				if (this.stopPullDownRefresh) {
					this.stopPullDownRefresh = false;
					uni.stopPullDownRefresh();
				}
			}).catch((e) => {
				//异常处理
			})
		},

		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			if( e.target.current==0){
				this.loadData2('tabChange');
			}else if( e.target.current==1){
				this.loadData('tabChange');
			}
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			if(index==0){
				// #ifdef MP-ALIPAY
				this.loadData2('tabChange');
				// #endif
			}else if(index==0){
				// #ifdef MP-ALIPAY
				this.loadData('tabChange');
				// #endif
			}
			
		},
		courseClick(item){
			console.log('item',item);
			let courseId;
			if(this.tabCurrentIndex==0){
				courseId=item.courseId
			}else if(this.tabCurrentIndex==1){
				courseId=item.otherId
			}
			this.$Router.push({
				path: '/extra/courseinfo/courseinfo',
				query: {
					courseId: courseId 
				}
			})
		},
		tocourseinfo(item){
			this.$Router.push({
				path: '/extra/courseinfo/courseinfo',
				query: {
					courseId: item.courseId
				}
			})
		}
	},
}
</script>

<style lang="scss">
.content {
  background: $bg-color-split;
  height: 100%;
  width: 750rpx;
  margin: 0 auto;
}

.swiper-box {
  height: calc(100vh - 40px);
}

.list-scroll-content {
  height: 100%;
}

.navbar {
  display: flex;
  height: 80rpx;
  padding: 0 5px;
  background: #fff;
  position: relative;
  z-index: 10;

  .nav-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 28rpx;
    color: $main-font-color;
    position: relative;

    &.current {
      color: var(--color_main);
      font-size: 32rpx;

      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 35rpx;
        height: 8rpx;
        background-color: var(--color_main);
        border-radius: 4rpx;
      }
    }
  }
}

.uni-swiper-item {
  height: auto;
}

.log-item {
  padding: 30rpx;
  background: #fff;
  position: relative;

  &:first-child {
    margin-top: 20rpx;
  }

  &.b_b:after {
    left: 30rpx;
    right: 30rpx;
  }

  .left {
    margin-right: 40rpx;

    .type {
      color: $main-font-color;
      font-size: 30rpx;
      font-weight: bold;
    }

    .desc {
      color: $main-second-color;
      font-size: 26rpx;
      margin: 10rpx 0;
    }

    .time {
      color: $main-third-color;
      font-size: 22rpx;
    }
  }

  .right {
    .amount {
      color: #949494;
      font-size: 32rpx;

      &.add {
        color: var(--color_price);
      }

      &.flag {
        margin-top: -5rpx;
        margin-right: 2rpx;
      }
    }

    .iconfont {
      color: #949494;
      font-size: 20rpx;
      margin-left: 19rpx;
    }
  }
}

.empty_part {
  padding-top: 160rpx;

  image {
    width: 380rpx;
    height: 280rpx;
  }

  text {
    color: $main-third-color;
    font-size: 26rpx;
    margin-top: 57rpx;
  }

  button {
    width: 245rpx;
    height: 66rpx;
    background: rgba(252, 28, 28, 0.05);
    border-radius: 33rpx;
    color: var(--color_main);
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 29rpx;
  }

  uni-button:after {
    border-radius: 200rpx;
    border-color: #fff;
  }
}

.expert_list{
		
		.expert_list_item{
			padding: 20rpx 30rpx;
			margin-bottom: 18rpx;
			background-color: #fff;
			.expert_list_item_image{
				width: 258rpx;
				height: 148rpx;
				margin-right: 24rpx;
				border-radius: 18rpx;
			}
			.expert_list_item_right{
				width: 408rpx;
				padding-top: 20rpx;
				.expert_list_item_right_top{
					font-size: 32rpx;
					font-weight: bold;
				}
				.expert_list_item_right_bottom{
					font-size: 24rpx;
					margin-top: 40rpx;
					& view:last-child{
						font-size: 20rpx;
						margin-top: 8rpx;
						color: #999999;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		
	}
	
	.hot_list{
		margin-top: 14rpx;
		background-color: #fff;
		padding: 24rpx 32rpx;
		.hot_item{
			padding-bottom: 16rpx;
			.hot_left{
				width: 258rpx;
				height: 168rpx;
				margin-right: 24rpx;
				position: relative;
				
				.hot_left_image{
					width: 258rpx;
					height: 168rpx;
					border-radius: 15rpx;
				}
				.hot_left_bottom{
					width: 100%;
					background-color: #b33129;
					font-size: 18rpx;
					color: #fff;
					border-radius: 10rpx;
					padding: 6rpx 10rpx;
					position: absolute;
					bottom: 0;
					height: 65rpx;
					.name{
						margin-bottom: 5rpx;
					}
				}
			}
			.hot_right{
				width: 438rpx;
				padding-top: 20rpx;
				.r_top_classname{
					font-size: 28rpx;
					font-weight: 600;
				}
				.r_lite_classname{
					width: 428rpx;
					font-size: 24rpx;
					color: #666666;
					margin-top: 8rpx;
					// background-color: red;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
	
				}
				.r_bottom{
					margin-top: 42rpx;
					
					.r_b_left{
						color: #F12B10;
						font-size: 24rpx;
					}
					.r_b_right{
						font-size: 24rpx;
						color: #9B9B9B;
					}
				}
			}
		}
	}
</style>
